<!DOCTYPE html>
<html>
<body>
<canvas id="myCanvas" width="650" height="320" style="border:1px solid #d3d3d3;"></canvas>
<script>
    const canvas = document.getElementById('myCanvas');
    const ctx = canvas.getContext('2d');
    ctx.lineWidth = 1.5;
    ctx.lineCap = 'round';
    ctx.strokeStyle = 'black';
    ctx.fillStyle = 'black';

    // Helper function to draw text with a subscript
    function drawTextWithSubscript(text, sub, x, y, baseFontSize = 22) {
        ctx.font = `bold ${baseFontSize}px serif`;
        const textMetrics = ctx.measureText(text);
        ctx.fillText(text, x, y);
        
        ctx.font = `bold ${baseFontSize * 0.75}px serif`;
        ctx.fillText(sub, x + textMetrics.width * 0.95, y + baseFontSize * 0.2);
    }

    // --- Draw Left Circuit ---
    
    // Solenoid Core (Left)
    let x1 = 50, y1 = 50, w1 = 220, h1 = 40;
    ctx.beginPath();
    ctx.moveTo(x1, y1); ctx.lineTo(x1 + w1, y1);
    ctx.moveTo(x1, y1 + h1); ctx.lineTo(x1 + w1, y1 + h1);
    ctx.moveTo(x1, y1); ctx.arc(x1, y1 + h1/2, h1/2, -Math.PI/2, Math.PI/2);
    ctx.moveTo(x1 + w1, y1); ctx.lineTo(x1 + w1 - 10, y1 + 10);
    ctx.moveTo(x1 + w1, y1 + h1); ctx.lineTo(x1 + w1 - 10, y1 + h1 - 10);
    ctx.stroke();

    // Solenoid Coils (Left)
    let n1 = 8, coil_w1 = 22;
    for (let i = 0; i < n1; i++) {
        let cx = x1 + 20 + i * coil_w1 + coil_w1 / 2;
        ctx.beginPath(); ctx.arc(cx, y1, coil_w1/2, Math.PI, 0); ctx.stroke();
        ctx.beginPath(); ctx.arc(cx, y1+h1, coil_w1/2, 0, Math.PI); ctx.stroke();
        ctx.beginPath(); ctx.moveTo(cx - coil_w1/2, y1); ctx.lineTo(cx - coil_w1/2, y1+h1); ctx.stroke();
    }
    ctx.beginPath(); ctx.moveTo(x1+20+n1*coil_w1, y1); ctx.lineTo(x1+20+n1*coil_w1, y1+h1); ctx.stroke();
    
    // Wiring and Components (Left)
    let wire_y_L = 200;
    
    // Bottom wire to rheostat
    let coil_L_out_bottom = x1 + 20 + 3 * coil_w1;
    ctx.beginPath();
    ctx.moveTo(coil_L_out_bottom, y1 + h1);
    ctx.lineTo(coil_L_out_bottom, wire_y_L);
    ctx.stroke();
    
    // Rheostat
    let rheo_x_start = coil_L_out_bottom;
    let rheo_x_end = rheo_x_start + 100;
    let zig_x = rheo_x_start, zig_y = wire_y_L, zig_l = 15, zig_h = 10;
    ctx.beginPath();
    ctx.moveTo(zig_x, zig_y);
    zig_x += zig_l; ctx.lineTo(zig_x, zig_y - zig_h);
    zig_x += zig_l; ctx.lineTo(zig_x, zig_y + zig_h);
    zig_x += zig_l; ctx.lineTo(zig_x, zig_y - zig_h);
    zig_x += zig_l; ctx.lineTo(zig_x, zig_y + zig_h);
    zig_x += zig_l; ctx.lineTo(zig_x, zig_y);
    ctx.lineTo(rheo_x_end, wire_y_L);
    ctx.stroke();
    
    // Wiper connection from top
    let wiper_x = rheo_x_start + 40;
    ctx.beginPath();
    ctx.moveTo(wiper_x, wire_y_L - 25);
    ctx.lineTo(wiper_x, wire_y_L);
    // Arrowhead
    ctx.moveTo(wiper_x, wire_y_L - 25); ctx.lineTo(wiper_x - 5, wire_y_L - 15);
    ctx.moveTo(wiper_x, wire_y_L - 25); ctx.lineTo(wiper_x + 5, wire_y_L - 15);
    ctx.stroke();

    // Battery and top wire
    let battery_x = rheo_x_end + 30;
    ctx.beginPath();
    // from rheostat wiper to battery
    ctx.moveTo(wiper_x, wire_y_L);
    ctx.lineTo(battery_x - 10, wire_y_L);
    // battery symbol
    ctx.moveTo(battery_x, wire_y_L - 15); ctx.lineTo(battery_x, wire_y_L + 15); // +
    ctx.moveTo(battery_x-10, wire_y_L - 8); ctx.lineTo(battery_x-10, wire_y_L + 8); // -
    ctx.stroke();
    // from battery to coil
    let coil_L_in_top = x1 + 20 + 7 * coil_w1;
    ctx.beginPath();
    ctx.moveTo(battery_x, wire_y_L);
    ctx.lineTo(coil_L_in_top, wire_y_L);
    ctx.lineTo(coil_L_in_top, y1);
    ctx.stroke();
    
    // Label R_Left
    drawTextWithSubscript("R", "Left", 100, 240);


    // --- Draw Right Circuit ---
    
    // Solenoid Core (Right)
    let x2 = 380, y2 = 50, w2 = 140, h2 = 40;
    ctx.beginPath();
    ctx.moveTo(x2, y2); ctx.lineTo(x2 + w2, y2);
    ctx.moveTo(x2, y2 + h2); ctx.lineTo(x2 + w2, y2 + h2);
    ctx.moveTo(x2, y2); ctx.arc(x2, y2 + h2/2, h2/2, -Math.PI/2, Math.PI/2);
    ctx.moveTo(x2 + w2, y2); ctx.lineTo(x2 + w2 - 10, y2 + 10);
    ctx.moveTo(x2 + w2, y2 + h2); ctx.lineTo(x2 + w2 - 10, y2 + h2 - 10);
    ctx.stroke();

    // Solenoid Coils (Right)
    let n2 = 4, coil_w2 = 25;
    for (let i = 0; i < n2; i++) {
        let cx = x2 + 20 + i * coil_w2 + coil_w2 / 2;
        ctx.beginPath(); ctx.arc(cx, y2, coil_w2/2, Math.PI, 0); ctx.stroke();
        ctx.beginPath(); ctx.arc(cx, y2+h2, coil_w2/2, 0, Math.PI); ctx.stroke();
        ctx.beginPath(); ctx.moveTo(cx - coil_w2/2, y2); ctx.lineTo(cx - coil_w2/2, y2+h2); ctx.stroke();
    }
    ctx.beginPath(); ctx.moveTo(x2+20+n2*coil_w2, y2); ctx.lineTo(x2+20+n2*coil_w2, y2+h2); ctx.stroke();
    
    // Wiring and Components (Right)
    let coil_R_out_bottom = x2 + 20 + 1 * coil_w2;
    let coil_R_in_top = x2 + 20 + 3 * coil_w2;
    
    // Galvanometer
    let galvo_x = coil_R_out_bottom + 40;
    let galvo_y = 210;
    let galvo_r = 20;
    ctx.beginPath();
    ctx.arc(galvo_x, galvo_y, galvo_r, 0, 2 * Math.PI);
    // Arrow inside
    ctx.moveTo(galvo_x, galvo_y + 12); ctx.lineTo(galvo_x, galvo_y - 12);
    ctx.moveTo(galvo_x, galvo_y - 12); ctx.lineTo(galvo_x - 6, galvo_y - 4);
    ctx.moveTo(galvo_x, galvo_y - 12); ctx.lineTo(galvo_x + 6, galvo_y - 4);
    ctx.stroke();

    // Resistor
    let res_xR = galvo_x + 60;
    let res_y_top = 150;
    let res_y_bottom = galvo_y;
    zig_x = res_xR; zig_y = res_y_top; zig_l = (res_y_bottom - res_y_top)/5; zig_h = 8;
    ctx.beginPath();
    ctx.moveTo(zig_x, zig_y);
    zig_y += zig_l; ctx.lineTo(zig_x - zig_h, zig_y);
    zig_y += zig_l; ctx.lineTo(zig_x + zig_h, zig_y);
    zig_y += zig_l; ctx.lineTo(zig_x - zig_h, zig_y);
    zig_y += zig_l; ctx.lineTo(zig_x + zig_h, zig_y);
    zig_y += zig_l; ctx.lineTo(zig_x, zig_y);
    ctx.stroke();
    
    // Wiring
    ctx.beginPath();
    // from coil bottom to galvo
    ctx.moveTo(coil_R_out_bottom, y2 + h2);
    ctx.lineTo(coil_R_out_bottom, galvo_y);
    ctx.lineTo(galvo_x - galvo_r, galvo_y);
    // from galvo to resistor
    ctx.moveTo(galvo_x + galvo_r, galvo_y);
    ctx.lineTo(res_xR, galvo_y);
    // from resistor to coil top
    ctx.moveTo(res_xR, res_y_top);
    ctx.lineTo(res_xR, y2);
    ctx.lineTo(coil_R_in_top, y2);
    ctx.stroke();

    // Label R_right
    drawTextWithSubscript("R", "right", res_xR + 10, res_y_top + 40);

</script>
</body>
</html>